﻿<%@ Page Title="日均销设置" Language="C#" MasterPageFile="~/master/m.master" %>

<script runat="server"></script>

<asp:Content ID="Content3" ContentPlaceHolderID="head" runat="Server">

    <link href="../assets/css/plugins/boxdrop/boxDrop.css" rel="stylesheet" />
    <link href="../assets/css/plugins/bootstrap-datepicker/bootstrap-datepicker.min.css" rel="stylesheet" />
    <link href="../assets/css/plugins/jQuery-DataTables/css/dataTables.bootstrap.min.css" rel="stylesheet" />
    <link href="../assets/js/plugins/fancybox/jquery.fancybox.css" rel="stylesheet">
    <link href="../assets/css/plugins/bootstrap-select/bootstrap-select.min.css" rel="stylesheet" />
    <link href="../assets/img/validate/validate.css" rel="stylesheet">
    <style type="text/css">
        iframe, html, body, .system-box, .right-side { overflow: hidden !important; background-color: white !important; }
        .system-box .right-side { width: 100%; height: 98%; margin: 0px !important; padding: 0px !important; }
        .condition { padding: 2px 0 }
        .condition-container { padding-bottom: 0px; }
        .line-height-34 { line-height: 39px }
        #mainTable { /*min-height: 300px;*/ }
        #mainTable th { text-align: center }
        .td-bgcolor { /*background-color: #F5F5F6*/ }
        .total { font-weight: 700; }
        .totalTr > .td-bgcolor { background-color: #eee; }
        .totalTr { /*border: 1px solid darkgray !important;*/ }
        .sub-item { width: 50px; }

        #setskcWindow { width: 520px; margin: 10px auto; }

        .history-ul { padding: 0px; text-align: center; }
        .history-li { list-style: none; font-size: 14px; line-height: 32px; border: solid 1px lightgray; cursor: pointer; }
        .search-input { /*width: 118px;*/ }
        .bg-selected { background-color: #dff0d8; }
        .future-selected { background: linear-gradient(135deg, #fff 74%, #00a0e5 78%, #00a0e5 100%); }
        .FutureWeek { padding: 0px !important; }
        #FutureWeek { padding: 0px !important; /*height:400px !important;*/ }
        .FutureWeek-ul { padding: 0px !important; /*height: 400px !important;*/ }
        .FutureWeek-ul::-webkit-scrollbar { width: 6px; height: 6px; background-color: #F5F5F5; }
        .FutureWeek-li { float: left; list-style: none; font-size: 14px; line-height: 32px; border: 2px solid lightgray; cursor: pointer; width: 62px; margin: 1px; text-align: center; }
        /*应用周列表中已经设置过的周样式*/
        .FutureWeek-li-set { border: 2px solid green; box-sizing: border-box; }
        .nopadding { padding: 0px !important; }
        #saveModuleBtn { margin-right: 160px !important; }
        .system-box { min-width: 940px; }

        .width40 { width: 40px; margin-left: 5px; }
        .width60 { width: 60px; margin-left: 5px; }
        .width80 { width: 80px; margin-left: 5px; }
        .width120 { width: 120px; }
        .width300 { width: 300px !important; }
        .width300 input { width: 300px !important; }
        .floatLeft { float: left !important; }
        .conditionButton { margin-left: 10px !important; }
        .backselect { color: #333; background-color: #fff; border-color: #ccc; padding: 5px 8px; }
        .detail { /*width: 120px;*/border-left: 2px solid darkgray !important; }

        /*#copyWindow div.modal-dialog { height: 400px !important; overflow: scroll !important; }
        #copyWindow div.modal-body {height: 300px !important;overflow-y: scroll !important;overflow-x: hidden !important;padding: 0px !important;}
        #copyWindow div.modal-body .row {margin: 0px !important;}*/
        
        .modal-body::-webkit-scrollbar {width: 6px;height: 6px;background-color: #F5F5F5;}
        .dataTables_scrollBody::-webkit-scrollbar {width: 6px;height: 6px;background-color: #F5F5F5;}


        .dataTables_scrollHead th {text-align: center;}
        .total-percentage, .total-standardskc {color: red;}
        .dataTables_scrollHead th:nth-child(2) {width: 100px;}
        .dataTables_scrollHead th:nth-child(3) {width: 70px;}
        .dataTables_scrollHead th:nth-child(4) {width: 70px;}
        .sub-table {padding: 0px !important;margin: 0px !important;border: 0px !important;}
        .sub-table tr th {width: 90px !important;padding: 0px !important;}
        .sub-table tr td {width: 90px !important;padding: 0px !important;}
        .sub-table th {border-top: 0px solid darkgray !important;}
        .sub-table tr th:nth-child(1) {border: 0px !important;}
        .sub-table tr td:nth-child(1) {border: 0px !important;}
        #mainTable tr[role='row'] td:nth-child(5) {padding: 0px !important;}
        i.icon {position: relative;right: -23px;bottom: 23px;color: white;}
        .editTitle {font-weight: bold;}
        li.list-group-item {padding: 0px !important;}
        .left-week, .right-week {padding: 0px !important;}
        .left-title, .right-title {height: 25px;/*font-weight: 530;*/font-size: 14px; padding-left: 10px !important;}


        .module-info td {width: 80px !important;padding-bottom: 10px;}
        .module-info td .control-label{ margin-right: 0px;}
        .module-info .form-group {margin-bottom: 0px;}
        .module-info .control-label {text-align: right;min-width: 80px;width: 80px;}
        .inmodal .modal-body{ padding: 0 !important;}

        .modal-open .modal {overflow-x: hidden;overflow-y: hidden;}
        ::-webkit-scrollbar { width: 6px; height: 0px; background-color: #F5F5F5; }
        #copyWindow .history-week { height: 300px; overflow: auto; }
        #copyWindow { width: 800px; height: 480px; margin: 10px auto; }

        .condition label{ margin: 0;}

        #mainTable_paginate{ margin-top: 10px; margin-right: 10px;}

        #mainTable tr td{ padding: 0;}
        .innertable {border: 0;}
        .innertable tr td{ padding: 0px !important;}
        .innertable .dayqty { width: 100%; height: 24px; text-align: center; border: 0;}

        .innertable .thLeft { width: 10%;}
        .innertable .thRight { width: 10%;border-right: 2px solid #cccccc !important;}
        .innertable .btdayqty {width: 10%;border-right: 2px solid #cccccc !important; }

        .innertable .btdayqty{ padding-bottom: 1px !important;}

        .innertable .tatolTr{ background-color: #f5f5f5;}
        .innertable .textBlue{ color: blue; }
        .innertable .textRed{ color: red; }

    </style>
</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="main" runat="Server">
    <div class="system-box">
        <div class="right-side">
            <!-- loading buttons start-->
            <div class="btns-container"></div>
            <!-- loading buttons end-->

    

            <!-- loading search condition start-->
            <div class="condition" style="overflow: visible;">
                <table>
                    <tr class="line-height-34">
                        <td>
                            <div class="width80 text-right">
                                <label>店铺级别：</label>
                            </div>
                        </td>
                        <td>
                            <div class="width120  no-padding">
                                <select id="search-ShopLevel" class="form-control selectpicker " data-width="110px" data-style="backselect"></select>
                            </div>
                        </td>
                        <td>
                            <div class="width40 text-right">
                                <label class="no-padding">大类：</label>
                            </div>
                        </td>
                        <td>
                            <div class="width120">
                                <select id="search-KindNames" class="form-control selectpicker " data-width="110px" data-style="backselect" data-live-search="true" multiple></select>
                            </div>
                        </td>
                        <td>
                            <div class="width40 text-right">
                                <label class=" no-padding">性别：</label>
                            </div>
                        </td>
                        <td>
                            <div class="width120">
                                <div class="width120">
                                    <select id="search-Gender" class="form-control selectpicker " data-width="110px" data-style="backselect" ></select>
                                </div>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
            <!-- loading search condition end-->

            <!-- loading body start-->
            <div class="table-container no-padding">
                <table class="table table-bordered text-center full-width" id="mainTable" style="table-layout:fixed">
     
                </table>
            </div>
            <!-- loading body end-->
        </div>
    </div>

</asp:Content>

<asp:Content ID="Content5" ContentPlaceHolderID="footer" runat="Server">

    <script src="../assets/js/page/rScroll.js"></script>

    <script src="../assets/js/plugins/bootstrap-suggest/bootstrap-suggest.min.js"></script>
    <script src="../assets/js/plugins/bootstrap-suggest/itemSuggest.js"></script>
    <script src="../assets/js/plugins/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>

    <!--jquery datatables-->
    <script src="../assets/js/plugins/dataTables/datatables.min.js"></script>
    <script src="../assets/js/plugins/jQuery-DataTables/dataTables.bootstrap.min.js"></script>


    <script src="../assets/js/plugins/fancybox/jquery.fancybox.js"></script>

    <script src="../assets/js/plugins/bootstrap-select/bootstrap-select.min.js"></script>
    <script src="../assets/js/plugins/bootstrap-select/i18n/defaults-zh_CN.min.js"></script>

    <script src="../assets/img/validate/learunui-validator.js"></script>
    <script>
        //诺米通用绑定下拉框
        var nmCommonBindList = function (controller, action, params, els, value, text, size, canNull, setdefault, callback) {
            Y.API2(controller, action, params, function (data) {
                if (data.Success == false) {
                    swal(data.Message, '', 'error');
                } else {
                    var html = '';
                    if (canNull) {
                        html = '<option value="">请选择</option>';
                    }
                    data.map(function (item, index) {
                        html += '<option value="' + item[value] + '" ' + ((index == 0 && setdefault) ? "selected" : "") + '>' + item[text] + '</option>';
                    });
                    els.map(function (item) {
                        $(item).empty();
                        $(item).html(html);
                        $(item).selectpicker({ size: size || 8, 'title': '请选择' });
                        $(item).selectpicker('refresh');
                    });
                    if (typeof callback === "function") {
                        callback();
                    }
                }
            });
        }

        //级别
        var nmShopLevelInfo = function (els, params, size, callback) {
            nmCommonBindList('DwGlobalVariable', 'GetGlobalVariableListShop', params, els, 'InfoName', 'InfoName', size, false, true, callback);
        }
        //大类
        var nmGetKindInfo = function (els, size, callback) {
            nmCommonBindList('Common', 'GetKindInfo', {}, els, 'KindID', 'KindName', size, false, callback);
        }
        //性别
        var nmGetSexList = function (els, size, callback) {
            nmCommonBindList('Common', 'GetSexInfo', {}, els, 'SexId', 'SexName', size, true, callback);
        }

        $('document').ready(function () {

            //模块ID
            var ModuleID = Y.getUrlParam("ModuleID");
            commonUtil.loadBtnList(ModuleID, function () {
                //$('#btn-save').attr('disabled', 'disabled');
                rScroll();
            });
             
            var Size = 500;

            /*========================================================================================*/

            //计算表格高度
            var ua = navigator.userAgent.toLowerCase();
            var calcTableHeight = function () {
                var tableHeight = 0;
                //开始时候表格可能没有初始化,取默认高度40
                var headHeight = $('.dataTables_scrollHead').outerHeight(true) || 40;
                //提供不同浏览器兼容计算
                if (ua.indexOf('chrome') > -1) {
                    tableHeight = $('.right-side').outerHeight() - $('.btns-container').outerHeight(true) - $('.condition-container').outerHeight(true) - headHeight - 46;
                } else {
                    tableHeight = $('.right-side').outerHeight() - $('.btns-container').outerHeight() - $('.condition-container').outerHeight() - headHeight - 46;
                }
                //必须用css方式设定，直接用.height()有时候会差60px
                if (tableHeight > 0) {
                    $('.dataTables_scrollBody').css({ height: tableHeight + 'px' });
                }
                return calcTableHeight;
            }

            /*========================================================================================*/

            var table = null;
            var thead = '<thead>\
                            <tr>\
                                <th class="thLeft">子项</th><th class="thRight">日均销</th>\
                                <th class="thLeft">子项</th><th class="thRight">日均销</th>\
                                <th class="thLeft">子项</th><th class="thRight">日均销</th>\
                                <th class="thLeft">子项</th><th class="thRight">日均销</th>\
                                <th class="thLeft">子项</th><th class="thRight">日均销</th>\
                            </tr>\
                        </thead>';
            var opts = {
                language: { url: "../assets/js/plugins/jQuery-DataTables/i18n/Chinese.json" },
                scrollX: false,
                searching: false,
                paging: false,
                info: false,
                ordering: false,
                lengthChange: false,
                processing: true,
                //autoWidth: true,
                pagingType: "full_numbers",
                scrollY: calcTableHeight(),//为了分页控件固定在下方
                //scrollCollapse: false, //当显示更少的记录时，是否允许表格减少高度
                serverSide: false, //开启服务器分页模式
                pageLength: Size,
                initComplete: function (settings, json) {
                    //表格初始化完毕立即计算一次
                    calcTableHeight();
                },
                ajax: {
                    url: '/api.ashx?c=GoodsSingleValidCalcAfterInfo05D&a=GetGoodsSingleValidCalcAfterInfo05DList&u=',
                    type: "POST",
                    //data: {},//提交参数
                    data: function (d) {
                        d.ShopLevel = $('#search-ShopLevel').val();
                        d.SexID = $('#search-Gender').val();
                        var kindArr = $('#search-KindNames').val();
                        var kinds = "";
                        if (kindArr != null) {
                            kinds = kindArr.join(',');
                        }
                        d.KindID = kinds;

                        //debugger 
                        //d.Page = (d.start / d.length) + 1;
                        //d.Size = d.length;
                    },
                    dataSrc: function (res) {//dataSrc函数应该return一个【实体数组】供渲染表格
                        if (res.Success === false) {
                            swal(res.Message, '', 'error');
                            return [];
                        } else {
                            var items = res.Data;
                            for (var i = 0; i < items.length; i++) {
                                var innerItems = items[i];
                                var newTable = ' <table class="table table-bordered text-center full-width innertable">';
                                newTable += thead;
                                newTable += '<tbody><tr class="dataTr">';
                                var n = 0;
                                var daySaleQty = 0;
                                for (var j = 0; j < innerItems.length; j++) {
                                    newTable += '<td  class="subItem tditem' + (n + 1) + '">' + innerItems[j].ItemOrSub + '</td>\
                                                 <td  class="btdayqty tddayqty' + (n + 1) + '" >\
                                                 <input class="dayqty '+ (innerItems[j].ChangeFlag == 0 ? "" :"textBlue")+'" oldvalue="' + innerItems[j].DaySaleQty + '" value="' + innerItems[j].DaySaleQty + '"/>\
                                                 </td>';
                                    daySaleQty += parseInt(innerItems[j].DaySaleQty * 1000);
                                    n++;
                                    if (n == 5 && n != innerItems.length) {
                                        newTable += '</tr><tr class="dataTr">';
                                        n = 0;
                                    }
                                }
                                
                                for (var k = 0; k < (5 - n) % 5; k++) {
                                    newTable += '<td></td><td class="btdayqty"></td>';
                                }
                                newTable += '</tr>';
                                //合计
                                newTable += '<tr class="tatolTr"><td style="height:24px;">合计</td><td class="dayQtyTatol textRed" colspan="9">' + daySaleQty / 1000+'</td></tr>';
                                newTable += '</tbody></table>';

                                res.Data[i].KindID = innerItems[0].KindID;
                                res.Data[i].KindName = innerItems[0].KindName;
                                res.Data[i].SexID = innerItems[0].SexID;
                                res.Data[i].SexName = innerItems[0].SexName;
                                res.Data[i].ShopLevel = innerItems[0].ShopLevel;
                                res.Data[i].newTable = newTable;
                                res.Data[i].RowId = i + 1;

                            };
                            return res.Data;
                        }
                    }
                },
                columns: [
                    {
                        title: '<input type="checkbox" name="checkAllDetail" class="checkAll" value="all" />',
                        data: null, "width": "20px", className: "text-center",
                        render: function (data, type, row, meta) {
                            return '<input type="checkbox" name="checkItemDetail" class="checkItem" value="" />';
                        }
                    },
                    { title: "行号", "data": "RowId", "width": "42px", className: "text-center RowId hide", defaultContent: ""},
                    { title: "KindID", "data": "KindID", "width": "42px", className: "text-center KindID  hide", defaultContent: "" },
                    { title: "大类", "data": "KindName", "width": "60px", className: "text-center ", defaultContent: "" },
                    { title: "SexID", "data": "SexID", "width": "40px", className: "text-center SexID hide", defaultContent: "" },
                    { title: "性别", "data": "SexName", "width": "30px", className: "text-center ", defaultContent: "" },
                    { title: "店铺级别", "data": "ShopLevel", "width": "30px", className: "text-center ShopLevel", defaultContent: "" },
                    { title: "日均销设置", "data": "newTable", className: "text-center ", defaultContent: "" }
                ]
            }

            //加载列表数据
            var loadList = function () {
                    table.ajax.reload(function () {
                        //debugger 
                        //重新计算列宽
                        table.columns.adjust().draw();
                    }, false);
                //debugger
            }

            //查询按钮
            $('.btns-container').on('click', '#btn-search', function () {
                loadList();
            });

            $("#mainTable").on("input propertychange", ".dayqty", function () {

                var value = $(this).val();
                value = value.replace(/[^\d.]/g, ""); //先把非数字的都替换掉，除了数字和. 
                value = value.replace('e', ""); //把可能输入的e干掉 
                value = value.replace('..', ".");  
                //直接.的就加个0
                if (value == ".") {
                    value = "0.";
                }
                //小数最大99.9
                if (value.length > 2) {
                    if (value.indexOf('.') == -1) {
                        //整数最大99
                        value = value.substring(0, 2);
                    } else {
                        //只能一个小数点，不管加在哪
                        var result = value.match(/\./g);
                        var count = !result ? 0 : result.length;
                        if (count > 1) {
                            var i = value.indexOf('.');
                            if (i==0) {
                                value ="0"+ value.substring(0, i + 2);
                            } else {
                                value = value.substring(0, i + 2);
                            }
                        } else {
                            //小数点之后只能有一位数字
                            var j = value.length - value.indexOf('.');
                            if (j > 2) {
                                var k = value.indexOf('.');
                                value = value.substring(0, k + 2);
                            }
                        }
                    }
                }
                $(this).val(value);


                var total = 0;
                $(this).parents('.innertable').find(".dayqty").each(function () {
                    total += parseInt($(this).val() * 1000);
                    console.log(total);
                });
                $(this).parents('.innertable').find('.dayQtyTatol').text(total / 1000);
            });

            /*========================================================================================*/
            //重新计算表格高度
            $(window).resize(function () {
                calcTableHeight();
            });
            calcTableHeight();

            nmShopLevelInfo(['#search-ShopLevel'], { InfoType: "ShopLevel" }, 8, function () {
                table = $('#mainTable').DataTable(opts);
            });
            nmGetKindInfo(['#search-KindNames']);
            nmGetSexList(['#search-Gender']);


            $('.table-container').on('click', '.checkAll', function () {
                var state = $(this).prop('checked');
                var selectArr = $('#mainTable .checkItem');
                selectArr.each(function () {
                    $(this).prop("checked", state);
                });
            });

            $('.table-container').on('click', '.checkItem', function () {
                var allItems = $('#mainTable .checkItem').length;
                var checkedItems = $('#mainTable .checkItem:checked').length;
                if (allItems == checkedItems) {
                    $('#mainTable_wrapper .dataTables_scrollHead .checkAll').prop("checked", true);
                } else {
                    $('#mainTable_wrapper .dataTables_scrollHead .checkAll').prop("checked", false);
                }
            });


            //保存按钮
            $('.btns-container').on('click', '#btn-save', function () {
                var trs = $('#mainTable .checkItem:checked').parents('tr');
                console.log(trs.length);
                var dataList = [];
                for (var i = 0; i < trs.length; i++) {
                    var tr = trs[i];
                    var model = {};
                    model.KindID = $(tr).find('.KindID').text();
                    model.SexID = $(tr).find('.SexID').text();
                    model.ShopLevel = $(tr).find('.ShopLevel').text();
                    model.list = [];
                    var innerTrs = $(tr).find('.innertable .dataTr');
                    for (var j = 0; j < innerTrs.length; j++) {
                        var n = $(innerTrs[j]).find('.btdayqty').length;
                        for (var k = 1; k <= n; k++) {
                            var item = $(innerTrs[j]).find('.tditem' + k).text();
                            var qty = $(innerTrs[j]).find('.tddayqty' + k + ' .dayqty').val();
                            var isChange = $(innerTrs[j]).find('.tddayqty' + k + ' .dayqty').attr('oldvalue') == qty;
                            model.list.push({ ItemOrSub: item, DaySaleQty: qty, ChangeFlag: !isChange });
                        }
                    }
                    dataList.push(model);
                }

                Y.API2("GoodsSingleValidCalcAfterInfo05D", "ModifyGoodsSingleValidCalcAfterInfo05D",
                    {
                        modifyList: dataList
                    },
                    function (data) {
                        if (data.Success == false) {
                            swal(data.Message, '', 'error');
                        } else {
                            swal("修改成功", '', 'success');
                            loadList();
                        }
                    });
            });

            $('.btns-container').on('click', '#calculateBtn', function () {
                layer.msg('正在计算，请耐心等待',
                    {
                        icon: 16,
                        shade: 0.5,
                        time: 0,
                        maxWidth: 200,
                        area: ['230px', '75px']
                    });

                Y.API2("GoodsSingleValidCalcAfterInfo05D", "CalGoodsSingleValidCalcAfterInfo05D", {}, function (data) {
                    layer.closeAll('dialog');
                    if (data.Success == false) {
                        swal(data.Message, '', 'error');
                    } else {
                        //table.clear();
                        loadList();
                    }
                });
            });
        
        });
    </script>
</asp:Content>
